<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
</style>
<body>
<select id="layout">
  <option value="dendrogram">系统树</option>
  <option value="compactBox">紧凑树</option>
  <option value="mindmap">脑图布局</option>
</select>
<div id="mountNode"></div>
<script src="assets/hierarchy.js"></script>
<script src="../build/g6.js"></script>
<script>
  let currentLayout = 'compactBox';
  const layouts = {
    dendrogram: {
      type: 'dendrogram',
      direction: 'LR', // H / V / LR / RL / TB / BT
      nodeSep: 50,
      rankSep: 100,
      radial: true
    },
    compactBox: {
      type: 'compactBox',
      direction: 'LR',
      fixedPosition: true,
      getId(d) { return d.id; },
      getHeight() { return 16 },
      getWidth() { return 16 },
      getVGap() { return 50 },
      getHGap() { return 100 }
    },
    mindmap: {
      type: 'mindmap',
      direction: 'H',
      getHeight() { return 16; },
      getWidth() { return 16; },
      getVGap() { return 50; },
    }
  };
  const graph = new G6.TreeGraph({
    container: 'mountNode',
    width: 500,
    height: 500,
    pixelRatio: 2,
    renderer: 'svg',
    modes: {
      default: ['collapse-expand', 'drag-canvas']
    },
    fitView: true,
    layout: layouts.compactBox
  });
  graph.node(node => {
    return {
      size: 16,
      anchorPoints: [[0,0.5], [1,0.5]],
      style: {
        fill: '#40a9ff',
        stroke: '#096dd9'
      },
      label: node.id,
      labelCfg: {
        position: node.children && node.children.length > 0 ? 'left' : 'right'
      }
    }
  });
  let i = 0;
  graph.edge(() => {
    i++;
    return {
      shape: 'cubic-horizontal',
      color: '#A3B1BF',
      label: i
    }
  });
  const data = {
    isRoot: true,
    id: 'Root',
    style: {
      fill: 'red'
    },
    children: [
      {
        id: 'SubTreeNode1',
        raw: {},
        children: [
          {
            id: 'SubTreeNode1.1'
          },
          {
            id: 'SubTreeNode1.2',
            children: [
              {
                id: 'SubTreeNode1.2.1'
              },
              {
                id: 'SubTreeNode1.2.2'
              },
              {
                id: 'SubTreeNode1.2.3'
              }
            ]
          }
        ]
      },
      {
        id: 'SubTreeNode2',
        children: [
          {
            id: 'SubTreeNode2.1'
          }
        ]
      }, {
        id: 'SubTreeNode3',
        children: [
          {
            id: 'SubTreeNode3.1'
          },
          {
            id: 'SubTreeNode3.2'
          },
          {
            id: 'SubTreeNode3.3'
          }
        ]
      }, {
        id: 'SubTreeNode4'
      }, {
        id: 'SubTreeNode5'
      }, {
        id: 'SubTreeNode6'
      }, {
        id: 'SubTreeNode7',
      }, {
        id: 'SubTreeNode8'
      }, {
        id: 'SubTreeNode9'
      }, {
        id: 'SubTreeNode10'
      }, {
        id: 'SubTreeNode11'
      }
    ]
  };
  graph.data(data);
  graph.render();
  document.getElementById('layout').addEventListener('change', (e) => {
    const layout = e.target.value;
    if (currentLayout !== layout) {
      currentLayout = layout;
      graph.changeLayout(layouts[currentLayout]);
    }
  });
</script>
</body>
</html>
